import React from 'react';
import ReactDOM from 'react-dom';

function withMouse(Com) {

  class Mouse extends React.Component { 
    state = { 
      x: 0,
      y: 0
    }
    mousemove = e => {
      const { x, y } = e
      this.setState({x, y})
    }
    componentDidMount(){
      document.addEventListener('mousemove', this.mousemove)
    }
    componentWillUnmount() {
      document.removeEventListener('mousemove', this.mousemove)
    }
  
    render () {
      return <Com x={this.state.x} y={this.state.y}/>
    }
  } 

  return Mouse
}

function M1 (props) {
  return <p>{props.x}-{props.y}</p>
}

const Com1 = withMouse(M1)
ReactDOM.render(<div>
  <Com1/>
</div>, 
document.getElementById('root')) 


// ReactDOM.render(<div>
//   <Mouse render={({x,y})=>{return (<h1>{x}-{y}</h1>)} } />
// </div>, 
// document.getElementById('root')) 